<template>
  <div class="Echarts">
    <div id="zhuzhuang" style="width: 757px;height: 335px;"></div>
  </div>
</template>
 
<script>
export default {
  name: 'Echarts',
  methods: {
    myEcharts(){
      var myChart = this.$echarts.init(document.getElementById('zhuzhuang'));
      //配置图表
      var option = {
        title: {
          text: '商店销售趋势',
        },
        tooltip: {},
        legend: {
          data: ['']
        },
        xAxis: {
          data: ['1月','2月','3月','4月','5月','6月','7月','8月',' 9月','10月','11月','12月']
        },
        yAxis: {},
        series: [{
          name: '',
          type: 'bar',
          data: [700,1100,820,420,480,420,600,420,820,820,1100,910]
        }]
      };
      myChart.setOption(option);
      myChart.setOption({
          color:['#58AFFF'],
      })
    }
  },
  mounted(){
    this.myEcharts();
  }
}
</script>
 
<style>
 div /deep/ element.style {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 600px;
    height: 355px;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding: 0px;
    margin: 0px;
    border-width: 0px;
}
</style>